<template>
  <v-container>
    <v-dialog
      v-model="dialog"
      :max-width="dialogWidth"
    >
      <v-card>
        <v-card-title>
          <span class="text-h3">
            {{ lanChar.sysConfig.MCOptionsConfigModDialogTitle }}
          </span>
        </v-card-title>
        <v-divider />
        <v-divider />
        <v-divider />
        <v-divider />
        <v-card-text>
          <v-container class="text-h4 text--primary font-weight-medium">
            <v-row>
              <v-spacer />
              <v-btn
                class="mr-0"
                color="secondary"
                width="100"
                @click="confirmDialog(lanChar.sysConfig.MCOptionsConfigModConfirm+'?', 'MC Options:'+JSON.stringify(mcOptions), applyModify, {})"
              >
                {{ lanChar.operateApply }}
              </v-btn>
            </v-row>
            <v-divider class="mb-3" />
            <v-row
              dense
              align="center"
            >
              <v-col
                cols="12"
                sm="2"
                class="text-right"
              >
                <span>
                  {{ lanChar.sysConfig.MCOptionsConfigRcvBuffSize }}
                </span>
              </v-col>
              <v-col
                cols="12"
                sm="3"
              >
                <v-select
                  v-model="mcOptions.RcvBuffSize"
                  dense
                  solo
                  hide-details
                  :items="buffItems"
                  :label="lanChar.sysConfig.MCOptionsConfigRcvBuffSize"
                  :suffix="lanChar.bytes"
                />
              </v-col>
              <v-spacer />
              <v-col
                cols="12"
                sm="2"
                class="text-right"
              >
                <span>
                  {{ lanChar.sysConfig.MCOptionsConfigCacheBuffSize }}
                </span>
              </v-col>
              <v-col
                cols="12"
                sm="3"
              >
                <v-select
                  v-model="mcOptions.CacheBuffSize"
                  dense
                  solo
                  hide-details
                  :items="buffItems"
                  :label="lanChar.sysConfig.MCOptionsConfigCacheBuffSize"
                  :suffix="lanChar.bytes"
                />
              </v-col>
            </v-row>
            <v-divider />
            <v-row
              dense
              align="center"
            >
              <v-col
                cols="12"
                sm="2"
                class="text-right"
              >
                <span>
                  {{ lanChar.sysConfig.MCOptionsConfigFIFOSize }}
                </span>
              </v-col>
              <v-col
                cols="12"
                sm="3"
              >
                <v-select
                  v-model="mcOptions.FIFOSize"
                  dense
                  solo
                  hide-details
                  :items="buffItems"
                  :label="lanChar.sysConfig.MCOptionsConfigFIFOSize"
                  :suffix="lanChar.bytes"
                />
              </v-col>
              <v-spacer />
              <v-col
                cols="12"
                sm="2"
                class="text-right"
              >
                <span>
                  {{ lanChar.sysConfig.MCOptionsConfigPreallocFIFOSize }}
                </span>
              </v-col>
              <v-col
                cols="12"
                sm="3"
              >
                <v-select
                  v-model="mcOptions.PreallocFIFOSize"
                  dense
                  solo
                  hide-details
                  :items="preallocItems"
                  :label="lanChar.sysConfig.MCOptionsConfigPreallocFIFOSize"
                  :suffix="lanChar.bytes"
                />
              </v-col>
            </v-row>
            <v-row
              dense
              align="center"
            >
              <v-col
                cols="12"
                sm="2"
                class="text-right"
              >
                <span>
                  {{ lanChar.sysConfig.MCOptionsConfigPrivateSegmentCnt }}
                </span>
              </v-col>
              <v-col
                cols="12"
                sm="3"
              >
                <v-select
                  v-model="mcOptions.PrivateSegmentCnt"
                  dense
                  solo
                  hide-details
                  :items="countItems"
                  :label="lanChar.sysConfig.MCOptionsConfigPrivateSegmentCnt"
                />
              </v-col>
              <v-spacer />
              <v-col
                cols="12"
                sm="2"
                class="text-right"
              >
                <span>
                  {{ lanChar.sysConfig.MCOptionsConfigPrivateSegmentSize }}
                </span>
              </v-col>
              <v-col
                cols="12"
                sm="3"
              >
                <v-text-field
                  v-model="mcOptions.PrivateSegmentSize"
                  solo-inverted
                  dense
                  hide-details="auto"
                  :hint="lanChar.sysConfig.MCOptionsConfigPrivateSegmentSizeHint"
                  :suffix="lanChar.bytes"
                />
              </v-col>
            </v-row>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn
            color="blue darken-1"
            text
            @click="dialog = false"
          >
            {{ lanChar.operateClose }}
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <material-snackbar-tip
      v-model="snackbarDescp.snackbar"
      :type="snackbarDescp.snackbarType"
      :timeout="snackbarDescp.snackbarTimeout"
      v-bind="{
        bottom: true,
        right: true
      }"
      :text="snackbarDescp.snackbarContent"
    />
    <alert-dialog
      v-model="alert.dialog"
      :title="alert.title"
      :msg="alert.msg"
    />
    <confirm-dialog
      v-model="confirm.dialog"
      :title="confirm.content.title"
      :msg="confirm.content.msg"
      :callback="confirm.operate.callback"
      :input="confirm.operate.input"
    />
  </v-container>
</template>

<script>
  import globalDef from '@/util/globals'
  import lan from '@/util/lan-char'
  import * as mcAxios from '@/util/mcaxios'
  export default {
    name: 'McOptionsModDialog',
    props: {
      value: Boolean,
      input: Object,
    },
    data () {
      return {
        lanChar: lan.GetLan(),
        dialog: this.value,
        dialogWidth: 1000,
        mcOptions: {
          RcvBuffSize: '0',
          CacheBuffSize: '0',
          FIFOSize: '0',
          PreallocFIFOSize: '0',
          PrivateSegmentCnt: 0,
          PrivateSegmentSize: 0,
        },
        rules: {
          required: value => !!value || this.lanChar.checkRequired,
        },
        buffItems: [
          '32K',
          '64K',
          '128K',
          '256K',
        ],
        preallocItems: [
          '0',
          '16K',
          '32K',
          '64K',
        ],
        countItems: [
          4,
          8,
          16,
        ],
        // snackbar data
        snackbarDescp: {
          snackbar: false,
          snackbarContent: 'snackbar content',
          snackbarTimeout: 2000,
          snackbarType: 'info',
        },
        // dialog data
        alert: {
          dialog: false,
          title: '',
          msg: '',
        },
        confirm: {
          dialog: false,
          content: {
            title: '',
            msg: '',
          },
          operate: {
            callback: null,
            input: null,
          },
        },
      }
    },
    watch: {
      dialog (val, oldVal) {
        if (val === oldVal) return

        this.$emit('input', val)
      },
      value (val, oldVal) {
        if (val === oldVal) return

        this.dialog = val
      },
      input: {
        handler (val, oldVal) {
          if (val === oldVal) return
          if (val.val !== null && val.val !== undefined) {
            this.mcOptions = JSON.parse(JSON.stringify(val.val))
          }
        },
        deep: true,
      },
    },
    created () {
      globalDef.VueObject.$on('lanChange', lanChar => {
        this.lanChar = lanChar
      })
    },
    mounted () {
    },
    beforeDestroy () {
    },
    methods: {
      tipInfo (level, content, timeout) {
        this.snackbarDescp.snackbarType = level
        this.snackbarDescp.snackbarContent = content
        this.snackbarDescp.snackbarTimeout = timeout
        this.snackbarDescp.snackbar = true
      },
      alertInfo (title, content) {
        this.alert.dialog = true
        this.alert.title = title
        this.alert.msg = content
      },
      confirmDialog (title, msg, operate, data) {
        this.confirm.content.title = title
        this.confirm.content.msg = msg
        this.confirm.operate.callback = operate
        this.confirm.operate.input = data
        this.confirm.dialog = true
      },
      getMcOptions () {
        const data = {
          request_type: 'mc options config get',
          instance_id: 'instance_id',
          sequence_no: 1000,
          data: {
            Name: this.mcOptions.Name,
          },
        }
        mcAxios.axiosGetConfig(data)
          .then((res) => {
            if (res.data.status === true) {
              this.mcOptions = res.data.data
            } else {
              console.log('getMcOptions get res fail')
            }
          })
          .catch((e) => {
            console.log('getMcOptions get fail: ', e)
          })
      },
      applyModify () {
        if ((String(this.mcOptions.RcvBuffSize) === '') ||
          (String(this.mcOptions.CacheBuffSize) === '') ||
          (String(this.mcOptions.FIFOSize) === '') ||
          (String(this.mcOptions.PreallocFIFOSize) === '') ||
          (String(this.mcOptions.PrivateSegmentCnt) === 0) ||
          (String(this.mcOptions.PrivateSegmentSize) === 0)) {
          this.alertInfo(this.lanChar.alertInfoTitleInputError, this.lanChar.alertInfoParamError)
          return
        }
        const dataSet = {
          request_type: 'mc options config set',
          instance_id: 'instance_id',
          sequence_no: 1000,
          data: this.mcOptions,
        }
        mcAxios.axiosSetConfig(dataSet)
          .then((res) => {
            if (res.data.status === true) {
              this.getMcOptions()
              this.tipInfo('success', this.lanChar.tipInfoOperateSuccess, globalDef.TIPINFO_DISPLAY_DURATION)
            } else {
              this.tipInfo('info', this.lanChar.tipInfoOperateRespFail + res.data.msg, globalDef.TIPINFO_DISPLAY_DURATION)
            }
          })
          .catch((e) => {
            this.tipInfo('error', this.lanChar.tipInfoOperateRequestFail + e, globalDef.TIPINFO_DISPLAY_DURATION)
          })
      },
    },
  }
</script>
